<template>
    <div class="notice">
        <div class="left">
            <i class="iconfont">&#xe6d8;</i>
        </div>
        <div class="center">
            <swiper :options="swiperOption" class="swiper-wrap swiper-no-swiping" ref="swiper" v-if="dataList.length > 0">
                <swiper-slide class="overflow_1" v-for="item of dataList" :key="item.id" >
                    {{ item.text }}
                </swiper-slide>
            </swiper>
        </div>
        <div class="right">
            <v-button class="btn" @click="onClick">查看</v-button>
        </div>
    </div>
</template>

<script>

    export default {
        name: "Notice",
        props: {
            data: {
                type: Array,
                default: []
            }
        },
        data: function() {
            return {
                dataList: [],
                swiperOption: {
                    notNextTick: true,
                    loop: true,
                    autoplay: {
                        delay: 2000,
                        stopOnLastSlide: false,
                    },
                    height: 40,
                    direction: "vertical",        // 滑动方向
                },
            }
        },
        methods: {
            onClick: function() {
                this.$emit('onClick');
            }
        },
        mounted: function() {
            this.dataList = this.data;
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';
    
    .content_box{
        width: 80%;
        min-width: 800px;
        margin: 0 auto;
    }
    .notice{
        display: flex;
        height: 40px;
        line-height: 40px;
        background-color: #f2f2f2;
        overflow: hidden;
        .left{
            width: 40px;
            text-align: center;
        }
        .center{
            padding-left: 20px;
            flex: 4;
        }
        .right{
            padding: 0 20px;
            .btn{
                padding: 0px 17px;
                border-color: #4c84ff;
                border-radius: 34px;
                height: 22px;
            }
        }
    }
</style>
